<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px"
             style="width: 80%; margin-left:50px;">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="服务名称" prop="serviceName" label-width="200px">
            <el-input v-model="temp.serviceName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dialogStatus === 'update'" label="服务编号" prop="serviceNo">
            <el-input v-model="temp.serviceNo" :disabled="true"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务类型" prop="serviceType"  label-width="200px">
            <el-select v-model="temp.serviceType" class="filter-item" placeholder="请选择服务类型">
              <el-option
                v-for="item in dictList('data_service_type')"
                :key="'type' + item.label"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="temp.serviceType === '1'">
          <el-col :span="12">
            <el-form-item label="服务请求地址" prop="httpService.url"  label-width="200px">
              <el-input v-model="temp.httpService.url" placeholder="请输入服务请求地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务请求头" prop="httpService.header"  label-width="200px">
              <el-input v-model="temp.httpService.header" placeholder="请输入服务请求头，如{key:val}格式"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务请求参数" prop="httpService.param"  label-width="200px">
              <el-input v-model="temp.httpService.param" placeholder="请输入服务请求参数，如{key:val}格式"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务请求方式" prop="httpService.httpMethod"  label-width="200px">
              <el-select v-model="temp.httpService.httpMethod" placeholder="请选择请求方式">
                <el-option
                  v-for="item in dictList('req_type')"
                  :key="'type' + item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </template>
        <template v-if="temp.serviceType === '2'">
          <el-col :span="12">
            <el-form-item label="服务wsdl地址" prop="webService.wsdl"  label-width="200px">
              <el-input v-model="temp.webService.wsdl" placeholder="请输入服务wsdl地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务命名空间" prop="webService.targetNamespace"  label-width="200px">
              <el-input v-model="temp.webService.targetNamespace" placeholder="请输入服务命名空间"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务方法" prop="webService.method"  label-width="200px">
              <el-input v-model="temp.webService.method" placeholder="请输入服务方法"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务请求报文" prop="webService.soap"  label-width="200px">
              <el-input v-model="temp.webService.soap" type="textarea" placeholder="请输入服务请求报文"/>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="12"  >
          <el-form-item label="调度策略：" prop="cronExpression"  label-width="200px">
            <el-input v-model="temp.cronExpression" @focus="dialogCron = true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status"  label-width="200px">
            <el-radio
              v-for="item in dictList('is_use')"
              :key="'type' + item.label"
              v-model="temp.status"
              :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark"  label-width="200px">
            <el-input v-model="temp.remark"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="设置执行策略" :visible.sync="dialogCron" :append-to-body="true"
               :close-on-click-modal="false">
      <Crontab @fill="getStr" @hide="dialogCron = false"></Crontab>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false ">
        {{ $t('table.cancel') }}
      </el-button>
      <el-button type="primary" :loading="loading" @click="dialogStatus==='create'?createData():updateData()">
        {{ $t('table.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import Crontab from "@/components/Crontab/index.vue"
import { createMarketServiceIntegration, updateMarketServiceIntegration, getMarketServiceIntegration } from '@/api/marketservice/marketServiceIntegrationTask'

export default {
  name: 'MarketServiceIntegrationForm',
  components: { Crontab },
  data() {
    return {
      dialogCron: false,
      rules: {
        serviceName: [{ required: true, message: '服务名称为必填项', trigger: 'blur' }],
        // cronExpression: [{ required: true, message: 'cronExpression为必填项', trigger: 'blur' }],
        status: [{ required: true, message: '状态为必填项', trigger: 'blur' }],
        serviceType: [{ required: true, message: '服务类型为必填项', trigger: 'blur' }],
        'httpService.url': [
          { required: true, message: '请求地址不能为空', trigger: 'blur' }
        ],
        'httpService.httpMethod': [
          { required: true, message: '服务请求方式不能为空', trigger: 'blur' }
        ],
        'webService.wsdl': [
          { required: true, message: '服务wsdl地址不能为空', trigger: 'blur' }
        ],
        'webService.targetNamespace': [
          { required: true, message: '服务命名空间不能为空', trigger: 'blur' }
        ],
        'webService.method': [
          { required: true, message: '服务方法不能为空', trigger: 'blur' }
        ],
        'webService.soap': [
          { required: true, message: '服务请求报文不能为空', trigger: 'blur' }
        ]
      },
      temp: {},
      textMap: {
        update: '编辑',
        create: '新建'
      },
      loading: false,
      dialogFormVisible: false,
      dialogStatus: ''
    }
  },
  methods: {
    getStr(str) {
      this.temp.cronExpression = str
    },
    getList() {
      this.$emit('refreshList')
    },
    resetTemp() {
      this.loading = false
      this.temp = {
        id: undefined,
        serviceName: undefined,
        serviceNo: undefined,
        status: undefined,
        remark: undefined,
        serviceType: undefined,
        cronExpression:undefined,
        httpService: {
            url: undefined,
            header: undefined,
            param: undefined,
            httpMethod: undefined
        },
        webService: {
            wsdl: undefined,
            targetNamespace: undefined,
            soap: undefined,
            method: undefined
        }
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          createMarketServiceIntegration(this.temp).then(response => {
            this.loading = false
            if (response.data.code === 0) {
              this.getList()
              this.dialogFormVisible = false
              this.$message.success(response.data.msg)
            } else {
              this.$message.error(response.data.msg)
            }
          })
        }
      })
    },
    handleUpdate(id) {
      this.resetTemp()
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      getMarketServiceIntegration(id).then(response => {
        if (response.data.code === 0) {
          this.temp = response.data.data.data
        } else {
          this.dialogFormVisible = false
          this.$message.error(response.data.msg)
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          updateMarketServiceIntegration(this.temp).then(response => {
            this.loading = false
            if (response.data.code === 0) {
              this.dialogFormVisible = false
              this.getList()
              this.$message.success(response.data.msg)
            } else {
              this.$message.error(response.data.msg)
            }
          })
        }
      })
    }
  }
}

</script>
